<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>走进Ta的世界 和Ta一起长大</title>
	<link rel="stylesheet" href="/assets/activity/jindi/css/reset.css">
	<link rel="stylesheet" href="/assets/activity/jindi/css/animate.min.css">
	<script type="text/javascript" src="/assets/activity/jindi/js/rem.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
	<style type="text/css">
		*{
			box-sizing: border-box;
		}
		body{
			width: 100%;
			height: 100%;
			max-width: 640px;
			margin: 0 auto;
			overflow: hidden;
		}
		.main{
			width: 100%;
			height: 100%;
			background: url(/assets/activity/jindi-5/img/bg.jpg);
			-webkit-background-size: cover;
			background-size: cover;
			position: relative;
			overflow: hidden;
		}
		.door{
			position: absolute;
			top: 1.94rem;
			left: 0.44rem;
			width: 86%;
			z-index: 1;
		}
		.door-left,.door-right,.glass-left,.glass-right{
			width: 50%;
			float: left;
			position: absolute;
		}
		.glass-left,.door-left{
			left: 0;
			transition: left 1s;
		}
		.glass-right,.door-right{
			right: 0;
			transition: right 1s;
		}
		.glass{
			position: absolute;
			top: 1.3rem;
			left: 0;
			z-index: 5;
			width: 100%;
		}
		.pagecon{
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%,-60%);
			-moz-transform: translate(-50%,-60%);
			transform: translate(-50%,-60%);
			text-align: center;
			z-index: 10;
			color: #fff;
			font-size: 0.33rem;
			line-height: 1.6em;
		}
		.pagecon p{
			white-space: nowrap;
		}
		.unlock{
			border: 2px solid #fff2c6;
			border-radius: 2px;
			padding: 5px 15px;
		}
		.text{
			margin-bottom: 0.5rem;
		}
		.page{
			display: none;
		}
		.page1{
			display: block;
		}
		.qianjin{
			position: absolute;
			width: 700%;
			top: 1.96rem;
			left: 0;
			z-index: 2;

		}
		.qianjin img{
			display: block;
			float: left;
			width: 14.28%;
		}
		.qianjin.move{
			animation:mymove 1.5s ease-in-out;
			-webkit-animation:mymove 1.5s ease-in-out;
		}
		@keyframes mymove{
			0% {
				left: 0;
			}
			100%{
				left: -600%;
			}
		}

		@-moz-keyframes mymove{
			0% {
				left: 0;
			}
			100%{
				left: -600%;
			}
		}

		@-webkit-keyframes mymove{
			0% {
				left: 0;
			}
			100%{
				left: -600%;
			}
		}

		@-o-keyframes mymove{
			0% {
				left: 0;
			}
			100%{
				left: -600%;
			}
		}
		.page3,.page5,.page7,.page8,.page9,.page10,.page11{
			padding-top: 1.96rem;
			height: 6.75rem;
			overflow: hidden;
			box-sizing: content-box;
			z-index: 0;
		}
		.page3 img,.page5 img,.page7 img,.page8 img,.page9 img{
			width: 83%;
			display: block;
			margin: 0 auto;
		}
		.page3 .pagecon{
			top: 32%;
			z-index: 0;
		}
		.page9 .pagecon{
			top: 3.7rem;
			z-index: 0;
			color: #000;
		}
		.page5 .pagecon,.page7 .pagecon,.page8 .pagecon{
			top: 8rem;
			z-index: 0;
		}
		.arrow{
			position: absolute;
			bottom: 0.2rem;
			left: 50%;
			width: 1rem;
			height: 1rem;
			margin-left: -0.5rem;
			padding: 0.2rem;
			display: none;
			animation:arrow 1.5s infinite;
			-webkit-animation:arrow 1.5s infinite;
		}
		.arrow img{
			width: 0.6rem;
		}
		@keyframes arrow{
			0% {
				opacity: 0;
				transform: scale(0.5);
			}
			100%{
				opacity: 1;
				transform: scale(1);
			}
		}

		@-moz-keyframes arrow{
			0% {
				opacity: 0;
				transform: scale(0.5);
			}
			100%{
				opacity: 1;
				transform: scale(1);
			}
		}

		@-webkit-keyframes arrow{
			0% {
				opacity: 0;
				transform: scale(0.5);
			}
			100%{
				opacity: 1;
				transform: scale(1);
			}
		}

		@-o-keyframes arrow{
			0% {
				opacity: 0;
				transform: scale(0.5);
			}
			100%{
				opacity: 1;
				transform: scale(1);
			}
		}

		.small-text{
			font-size: 0.28rem;
			line-height: 1.4em;
			margin-top: 0.15rem;
		}
		.msg{
			width: 78%;
			display: block;
			margin: 3.1rem auto 0;
		}
		.logo{
			width: 41%;
			padding-left: 0.3rem;
		}
		.player{
			position: absolute;
			top: 0.2rem;
			right: 0.2rem;
			width: 40px;
			height: 40px;
			z-index: 20;
			overflow: hidden;
			border:none;
			left:auto;
		}
		.player.active{
			-moz-animation:rotate 3s infinite linear;
			-webkit-animation:rotate 3s infinite linear;
			animation:rotate 3s infinite linear;
		}
		@-moz-keyframes rotate{
			0%{
				-moz-transform:rotate(0deg);
			}
			100%{
				-moz-transform:rotate(360deg);
			}
		}
		@-webkit-keyframes rotate{
			0%{
				-webkit-transform:rotate(0deg);
			}
			100%{
				-webkit-transform:rotate(360deg);
			}
		}
		@keyframes rotate{
			0%{
				transform:rotate(0deg);
			}
			100%{
				transform:rotate(360deg);
			}
		}
		.player-img{
			width: 100%;
			display: block;
			margin: 0;
		}
		.cover{
			z-index: 30;
		}
		.page10,.page11{
			height:100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			position: relative;
			z-index: 20;
		}
		.more{
			display: inline-block;
			border: 1px solid #fff;
			color: #fff;
			margin: 0 auto;
			font-size: 0.26rem;
			letter-spacing: 0.5em;
			padding: 5px 10px;
			position: relative;
			left: 50%;
			transform: translateX(50%);
			-webkit-transform: translateX(-50%);
			-moz-transform: translateX(-50%);
			margin-top: 0.5rem;
		}
		.zongdongyuan{
			display: block;
			margin: 2.2rem auto 0;
			width: 82%;
		}
	</style>
</head>
<body>
<div class="player active">
	<img src="/assets/activity/jindi-5/img/player.png" alt="" class="player-img">
	<audio src="http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm-5.mp3" autoplay="autoplay" loop="loop" id="media"></audio>
</div>
<div class="main">
	<div class="door">
		<img src="/assets/activity/jindi-5/img/door-left.png" alt="" class="door-left">
		<img src="/assets/activity/jindi-5/img/door-right.png" alt="" class="door-right">
	</div>
	<div class="qianjin clearfix">
		<img src="/assets/activity/jindi-5/img/qianjin1.jpg" alt="">
		<img src="/assets/activity/jindi-5/img/qianjin1.jpg" alt="">
		<img src="/assets/activity/jindi-5/img/qianjin1.jpg" alt="">
		<img src="/assets/activity/jindi-5/img/qianjin1.jpg" alt="">
		<img src="/assets/activity/jindi-5/img/qianjin1.jpg" alt="">
		<img src="/assets/activity/jindi-5/img/qianjin1.jpg" alt="">
		<img src="/assets/activity/jindi-5/img/qianjin1.jpg" alt="">
	</div>
	<div class="glass">
		<img src="/assets/activity/jindi-5/img/glass-left.png" alt="" class="glass-left">
		<img src="/assets/activity/jindi-5/img/glass-right.png" alt="" class="glass-right">
	</div>
	<div class="page page1">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">人生的旅途中</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">你亏欠了孩子多少陪伴？</p>
			</div>
			<a class="unlock animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 1s;">点击开启时光之旅</a>
		</div>
	</div>
	<div class="page page2">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">当Ta第一次学会叫</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">“爸爸妈妈”</p>
			</div>
		</div>
	</div>
	<div class="page page3">
		<img src="/assets/activity/jindi-5/img/page3.jpg" alt="">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">我们没能在他身边，</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">手边还忙碌着工作… </p>
			</div>
		</div>
	</div>
	<div class="page page4">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">当Ta</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">第一次学会蹒跚的走路</p>
			</div>
		</div>
	</div>
	<div class="page page5">
		<img src="/assets/activity/jindi-5/img/page5.jpg" alt="">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">我们也没能在身边，</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">为他保驾护航 </p>
			</div>
		</div>
	</div>
	<div class="page page6">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">当Ta</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">拿到第一个100分的时候 </p>
			</div>
		</div>
	</div>
	<div class="page page7">
		<img src="/assets/activity/jindi-5/img/page7.jpg" alt="">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">当Ta第一次戴上红领巾</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">第一次被老师批评 </p>
			</div>
		</div>
	</div>
	<div class="page page8">
		<img src="/assets/activity/jindi-5/img/page8.jpg" alt="">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">你因为忙碌</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">错过了多少次孩子值得纪念的时刻？</p>
				<div class="small-text">
					<p class="animated fadeIn" style="-webkit-animation-duration: 1s; -webkit-animation-delay: 1s;">据调查显示：</p>
					<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 1.5s;">50%的父母每周陪孩子平均不足5小时 </p>
				</div>
			</div>
		</div>
	</div>
	<div class="page page9">
		<img src="/assets/activity/jindi-5/img/page9.jpg" alt="">
		<div class="pagecon">
			<div class="text">
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;">走进他/她的世界</p>
				<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">和他/她一起长大</p>
				<div class="small-text">
					<p class="animated fadeIn" style="-webkit-animation-duration: 1s; -webkit-animation-delay: 1s;">“爸爸妈妈，</p>
					<p class="animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 1.5s;">再不陪我，我就长大了！” </p>
				</div>
			</div>
		</div>
	</div>
	<div class="page page10">
		<img src="/assets/activity/jindi-5/img/logo.png" alt="" class="logo">
		<img src="/assets/activity/jindi-5/img/page10.png" alt="" class="msg">
		<a class="more animated fadeIn" style="-webkit-animation-duration: 1s;-webkit-animation-delay: 0.5s;">点击查看近期活动</a>
	</div>
	<div class="page page11">
		<img src="/assets/activity/jindi-5/img/logo.png" alt="" class="logo">
		<img src="/assets/activity/jindi-5/img/page11.png" alt="" class="zongdongyuan">
		<div class="cover" >
			<p>阅读数：<span class="num"><?php echo $view_nums;?></span>	</p >
		</div>
	</div>
	<a class="arrow page3-arrow">
		<img src="/assets/activity/jindi-5/img/arrow-left.png" alt="">
	</a>
	<a class="arrow page4-arrow">
		<img src="/assets/activity/jindi-5/img/arrow-left.png" alt="">
	</a>
	<a class="arrow page5-arrow">
		<img src="/assets/activity/jindi-5/img/arrow-left.png" alt="">
	</a>
	<a class="arrow page6-arrow">
		<img src="/assets/activity/jindi-5/img/arrow-left.png" alt="">
	</a>
	<a class="arrow page7-arrow">
		<img src="/assets/activity/jindi-5/img/arrow-left.png" alt="">
	</a>
</div>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	wx.config(<?php echo $js->config(array('onMenuShareTimeline','onMenuShareAppMessage'), false) ?>);
	wx.ready(function () {
		wx.onMenuShareTimeline({
			title: '你亏欠了孩子多少陪伴？', // 分享标题
			desc: '陪TA一起长大', // 分享描述
			link: 'http://udfang.com/activity/html5five', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'http://udfang.com/assets/activity/jindi-5/img/share.jpg', // 分享图标
		});
		wx.onMenuShareAppMessage({
			title: '你亏欠了孩子多少陪伴？', // 分享标题
			desc: '陪TA一起长大', // 分享描述
			link: 'http://udfang.com/activity/html5five', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: 'http://udfang.com/assets/activity/jindi-5/img/share.jpg', // 分享图标
		});
	})
</script>
<script type="text/javascript">
	$('.unlock').on('click',function(){
		$('.page1').fadeOut();
		$('.page2').delay(500).slideDown();
		$('.qianjin').addClass('move');
		setTimeout(openGlass, 2000);
		$('.page2').delay(1000).fadeOut();
		setTimeout(function(){
			$('.page3').show();
			openDoor();
			$('.qianjin').removeClass('move');
		}, 3000);
		setTimeout(function(){$('.page3-arrow').show()}, 4000);
	})
	$('.page3-arrow').on('click',function(){
		$('.page3-arrow').hide();
		closeDoor();
		setTimeout(function(){
			closeGlass();
			$('.page3').hide();
		},1000);
		setTimeout(function(){
			$('.qianjin').show().addClass('move');
			$('.page4').fadeIn();
		},2000);
		setTimeout(function(){
			$('.page4').fadeOut();
			openGlass();
		},4000);
		setTimeout(function(){
			$('.page5').show();
			openDoor();
			$('.qianjin').removeClass('move');
		}, 5000);
		setTimeout(function(){$('.page4-arrow').show()}, 6000);
	})
	$('.page4-arrow').on('click',function(){
		$('.page4-arrow').hide();
		closeDoor();
		setTimeout(function(){
			closeGlass();
			$('.page5').hide();
		},1000);
		setTimeout(function(){
			$('.qianjin').show().addClass('move');
			$('.page6').fadeIn();
		},2000);
		setTimeout(function(){
			$('.page6').fadeOut();
			openGlass();
		},4000);
		setTimeout(function(){
			$('.page7').show();
			openDoor();
			$('.qianjin').removeClass('move');
		}, 5000);
		setTimeout(function(){$('.page5-arrow').show()}, 6000);
	})
	$('.page5-arrow').on('click',function(){
		$('.page5-arrow').hide();
		closeDoor();
		setTimeout(function(){
			closeGlass();
			$('.page7').hide();
		},1000);
		setTimeout(function(){
			$('.qianjin').show().addClass('move');
		},2000);
		setTimeout(openGlass,4000);
		setTimeout(function(){
			$('.page8').show();
			openDoor();
			$('.qianjin').removeClass('move');
		}, 5000);
		setTimeout(function(){$('.page6-arrow').show()}, 7000);
	})
	$('.page6-arrow').on('click',function(){
		$('.page6-arrow').hide();
		closeDoor();
		setTimeout(function(){
			closeGlass();
			$('.page8').hide();
		},1000);
		setTimeout(function(){
			$('.qianjin').show().addClass('move');
		},2000);
		setTimeout(openGlass,4000);
		setTimeout(function(){
			$('.page9').show();
			openDoor();
			$('.qianjin').removeClass('move');
		}, 5000);
		setTimeout(function(){$('.page7-arrow').show()}, 7000);
	})
	$('.page7-arrow').on('click',function(){
		$('.page7-arrow').hide();
		closeDoor();
		setTimeout(function(){
			closeGlass();
			$('.page9').hide();
		},1000);
		setTimeout(function(){
			$('.qianjin').show().addClass('move');
		},2000);
		setTimeout(function(){
			$('.qianjin').removeClass('move');
			$('.page10').fadeIn();
		}, 4000);
	})
	function openGlass(){
		$('.glass-right').css({
			'right':"-42%",
		});
		$('.glass-left').css({
			'left':"-42%",
		});
	}
	function openDoor(){
		$('.qianjin').hide();
		$('.door-right').css({
			'right':"-50%",
		});
		$('.door-left').css({
			'left':"-50%",
		});
	}
	function closeGlass(){
		$('.glass-right').css({
			'right':"0",
		});
		$('.glass-left').css({
			'left':"0",
		});
	}
	function closeDoor(){
		$('.qianjin').hide();
		$('.door-right').css({
			'right':"0",
		});
		$('.door-left').css({
			'left':"0",
		});
	}
	$('.more').on('click',function(){
		$('.page10').hide();
		$('.page11').fadeIn(500);
	})
	document.addEventListener("WeixinJSBridgeReady", function () {
		document.getElementById('media').play();
	}, false);
	$('.player').on("click",function(){
		$(this).toggleClass('active');
		if($('.player').hasClass('active')){
			$(this).find('audio').attr("src","http://assets-cdn.udfang.com/music/20170616/h5-jd-bgm-5.mp3");
		}else{
			$(this).find('audio').attr("src","");
		}
	})
</script>
</body>
</html>